<template>
	<view class="withdrawal-account-container">
<up-navbar :title="t('Withdrawal account')" @click="goWithdraw" :autoBack="true">
						<template #left>
						  <view class="nav-back-btn">
						    <image class="back-icon" src="@/static/img/left.png"></image>
						  </view>
						</template>
					</up-navbar>

		
		<view class="header-section">
			<view class="title-section">
				<text class="main-title">{{t('Withdrawal')}}</text>
				<text class="main-title">{{t('Account')}}</text>
			</view>
			<view class="credit-card-3d">
				<view class="card-body">
					<view class="card-chip"></view>
					<view class="card-logo"></view>
					<view class="card-stripe"></view>
				</view>
			</view>
		</view>

		
		<view class="form-section">
			<view class="input-group">
				<text class="input-label">{{t('Select Bank')}}</text>
				<view class="bank-select-input" @click="showBankSelector">
					<input 
						v-model="baseData.cardForm.ifsc" 
						type="text"
						:placeholder="t('Please select bank')"
						class="form-input bank-input"
						readonly
						disabled="true"
					/>
					<text class="arrow-icon">›</text>
				</view>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Number')}}</text>
				<input 
					v-model="baseData.cardForm.account_num" 
					type="text"
					:placeholder="t('Enter account number')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Holder Name')}}</text>
				<input 
					v-model="baseData.cardForm.holder_name" 
					type="text"
					:placeholder="t('Enter holder name')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Email')}}</text>
				<input 
					v-model="baseData.cardForm.accEmail" 
					type="email"
					:placeholder="t('Enter email address')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Phone')}}</text>
				<input 
					v-model="baseData.cardForm.acc_phone" 
					type="tel"
					:placeholder="t('Enter phone number')"
					class="form-input"
				/>
			</view>
		</view>

		
		<view class="submit-section">
			<view class="submit-button" @click="addBank">
				<text class="submit-text">{{t('Save')}}</text>
			</view>
		</view>

		
		<view class="note-section">
			<text class="note-title">{{t('Important Notes')}}</text>
			<text class="note-text">• {{t('Please ensure all information is accurate')}}</text>
			<text class="note-text">• {{t('Account number must be numeric only')}}</text>
			<text class="note-text">• {{t('Account holder name should contain only letters')}}</text>
			<text class="note-text">• {{t('Email format must be valid')}}</text>
		</view>

		
		<up-popup :show="showBankPopup" v-model="baseData.cardForm.bankName" mode="bottom" border-radius="10" class="custom-width-bottom">
			<view class="bank-popup">
				<view class="bank-popup-header">
					<text class="bank-popup-title">{{t('Select Bank')}}</text>
					<view class="bank-popup-close" @click="closeBankPopup">
						<up-icon name="close" size="1.5rem"></up-icon>
					</view>
				</view>

				<scroll-view scroll-y="true" class="bank-list" style="max-height: 60vh;">
					<view class="bank-item" v-for="(bank, index) in bankName" :key="index" @click="selectBank(bank)">
						{{ bank.label }}
					</view>
				</scroll-view>
			</view>
		</up-popup>
	</view>
</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive, ref } from 'vue'
	import { setBankCard, bankCardInfo } from '@/api/user'
	

	const { t } = useI18n();
	const baseData = reactive({
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		cardForm: {
			ifsc: null,
			holder_name: null,
			account_num: null,
			country:2,
			accEmail:'',
			ac_type:1  ,
			platform:3,
			acc_phone:null,
			city:null,
			lastName:null,
			firstName:null,
			    ext: {
			    }
			
		}
	})
	
	const bankName = ref([
	  { label: "Bank BCA", value: "BCA" },
	  { label: "Bank BRI", value: "BRI" },
	  { label: "BANK MANDIRI", value: "MANDIRI" },
	  { label: "BANK BNI 46", value: "BNI" },
	  { label: "BANK CIMB NIAGA", value: "CIMB" },
	  { label: "BANK PERMATA", value: "PERMATA" },
	  { label: "Bank BJB", value: "BJB" },
	  { label: "BANK DANAMON INDONESIA", value: "DANAMON" },
	  { label: "Bank BTN", value: "BTN" },
	  { label: "BANK MAYBANK INDONESIA", value: "MAYBANK" },
	  { label: "BANK SINARMAS", value: "SINARMAS" },
	  { label: "BANK PANIN", value: "PANIN" },
	  { label: "BANK BNI SYARIAH", value: "BNI_SYR" },
	  { label: "BANK SYARIAH MANDIRI", value: "MANDIRI_SYR" },
	  { label: "BPD DKI JAKARTA", value: "DKI" },
	  { label: "BANK MEGA", value: "MEGA" },
	  { label: "BSI (Bank Syariah Indonesia)", value: "BSI" },
	  { label: "Bank BTPN", value: "BTPN" },
	  { label: "BANK BRI SYARIAH", value: "BRI_SYR" },
	  { label: "BANK MUAMALAT INDONESIA", value: "MUAMALAT" },
	  { label: "BANK OCBC NISP", value: "OCBC" },
	  { label: "OVO", value: "OVO" },
	  { label: "SHOPEEPAY", value: "SHOPEEPAY" },
	  { label: "DANA", value: "DANA" },
	  { label: "GOPAY", value: "GOPAY" }
	])
	const createDefaultCardForm = ref({
	  ifsc: null,
	  holder_name: null,
	  account_num: null,
	  country: 2,
	  acc_phone: null,
	  ac_type: 1,
	  platform: 1,
	  ext: { accEmail: null }
	})
	  const showBankPopup = ref(false);
  
  const showBankSelector = () => {
    showBankPopup.value = true;
  }
  
  
  const closeBankPopup = () => {
    showBankPopup.value = false;
  }
  
	const getBankLabel = (ifscCode:any) => {
		const bank = bankName.value.find(item => item.value === ifscCode);

		return bank ? bank.label : null;
	};

	const getBankValue = (ifscCode:any) => {

		const bank = bankName.value.find(item => item.label === ifscCode);

		return bank ? bank.value : null;
	};
  
  const selectBank = (bank) => {
    baseData.cardForm.ifsc = bank.label;
    
    showBankPopup.value = false;
  }
	const addBank = async () => {
		if (!baseData.cardForm.account_num) {
			uni.showToast({
				title: t('Please fill in') + t('Account Number'),
				icon: "none"
			})
			return
		}
		const regex = /^\d+$/
		if (!regex.test(baseData.cardForm?.account_num)) {
			uni.showToast({
				title: t('account must be numeric'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.holder_name) {
			uni.showToast({
				title: t('Please fill in') + t('Account Holder Name'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.ifsc) {
			uni.showToast({
				title: t('Please fill in') + 'ifsc',
				icon: "none"
			})
			return
		}
		const holder_nameregex = /^[A-Za-z\s]+$/;
		if (!holder_nameregex.test(baseData.cardForm?.holder_name)) {
			uni.showToast({
				title: t('Account name error'),
				icon: "none"
			})
			return
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if (!emailRegex.test(baseData.cardForm.accEmail)) {
			uni.showToast({
				title: t('Invalid Email Format'),
				icon: 'none',
			})
			return
		}
		if (!baseData.cardForm.acc_phone) {
			uni.showToast({
				title: t('Please fill in') + t('Phone'),
				icon: "none"
			})
			return
		}
		baseData.cardForm.holder_name = baseData.cardForm.holder_name?.replace(/\s*/g, '');
		baseData.cardForm.country=2;
		baseData.cardForm.ac_type=1;
		const ifscCode = baseData.cardForm.ifsc;
		baseData.cardForm.ifsc = getBankValue(ifscCode);
		
		Object.assign(
		  createDefaultCardForm.value,
		  (({ ac_type, country, holder_name, acc_phone, ifsc, account_num,platform }) =>
		    ({ ac_type, country, holder_name, acc_phone, ifsc, account_num,platform }))(baseData.cardForm)
		)
		
		
		createDefaultCardForm.value.ext = {
		  ...(createDefaultCardForm.value.ext || {}),
		  accEmail: baseData.cardForm.accEmail ?? baseData.cardForm.accEmail ?? ''
		}
		console.log("baseData.cardForm",createDefaultCardForm.value)
		const res = await setBankCard(createDefaultCardForm.value)
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
			goWithdraw()
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}
	const goWithdraw = () => {
		window.top?.postMessage('/pages/withdraw/index', window.location.origin)
		uni.navigateTo({
		  url: '/pages/withdraw/index',
		})
	}
	const getCard = async () => {
		const ress = await bankCardInfo({country:2,platform:baseData.cardForm.platform})
		if (ress.code == 0) {
			baseData.cardForm = ress.data.length > 0 ? ress.data[0] : {
				ifsc: null,
				holder_name: null,
				account_num: null,
			},
			baseData.cardForm.platform=uni.getStorageSync('platform');
baseData.cardForm.ext = baseData.cardForm.ext || {};
baseData.cardForm.accEmail = baseData.cardForm.ext.accEmail ?? '';

			const ifscCode = baseData.cardForm.ifsc;
			if(ifscCode!==null){
				baseData.cardForm.ifsc = getBankLabel(ifscCode);
			}
		}
	}
	onMounted(() => {
		
		uni.setNavigationBarTitle({
			title: 'Quovo ' + t('Earn money so easy') + '!' 
		});
	
		baseData.cardForm.platform=uni.getStorageSync('platform');
		
		getCard();
	});
</script>

<style lang="scss" scoped>
@import '@/styles/bank.scss';
</style>